<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>模态框多种弹出效果</title>
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link href="css/component.css" rel="stylesheet">
</head>

<body>
<div style="width:1000px; height:500px; padding-left:450px;">
    <table class="table" style=" background-color:#FC9">
        <thead>
        <tr>
            <th style="width:30%;">Modal Type</th>
            <th>Example</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="middle-align">Fade in &amp; Scale</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">Slide in (right)</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-2">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">Slide in (bottom)</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-3">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">Newspaper</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-4">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">Fall</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-5">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">Side Fall</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-6">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">Sticky Up</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-7">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">3D Flip (horizontal)</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-8">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">3D Flip (vertical)</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-9">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">3D Sign</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-10">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">Super Scaled</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-11">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">Just Me</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-12">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">3D Slit</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-13">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">3D Rotate Bottom</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-14">Show Me</a></td>
        </tr>
        <tr>
            <td class="middle-align">3D Rotate In Left</td>
            <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-15">Show Me </a></td>
        </tr>
        </tbody>
    </table>
    <div class="md-modal md-effect-1" id="modal-1">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-2" id="modal-2">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-3" id="modal-3">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-4" id="modal-4">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-5" id="modal-5">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-6" id="modal-6">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-7" id="modal-7">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-8" id="modal-8">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-9" id="modal-9">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-10" id="modal-10">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-11" id="modal-11">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-12" id="modal-12">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-13" id="modal-13">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-14" id="modal-14">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-15" id="modal-15">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-modal md-effect-16" id="modal-16">
        <div class="md-content">
            <h3>Modal Dialog</h3>
            <div>
                <p>This is a modal window. You can do the following things with it:</p>
                <ul>
                    <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget
                        to read what they say.
                    </li>
                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and
                        appreciate its presence.
                    </li>
                    <li><strong>Close:</strong> click on the button below to close the modal.</li>
                </ul>
                <button class="md-close btn-sm btn-primary">Close me!</button>
            </div>
        </div>
    </div>
    <div class="md-overlay"></div>
    <!-- the overlay element -->

</div>
</body>
<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>
</html>
